import { FileTextFilled, SettingOutlined } from '@ant-design/icons';
import ComponentProp from '../ComponentProp';
import PageSetting from '../PageSetting';
import { Tabs } from 'antd';
import { FC, useEffect, useState } from 'react';
import useGetComponentInfo from '../../../../../hooks/useGetComponentInfo';

const RightPanel: FC = () => {
  const { selectedId } = useGetComponentInfo();
  const tabItems = [
    {
      key: 'prop',
      label: (
        <span>
          <FileTextFilled />
          属性
        </span>
      ),
      children: <ComponentProp />,
    },
    {
      key: 'setting',
      label: (
        <span>
          <SettingOutlined />
          页面设置
        </span>
      ),
      children: <PageSetting />,
    },
  ];
  const [activeKey, setActiveKey] = useState('prop');
  useEffect(() => {
    if (selectedId) {
      setActiveKey('prop');
    } else {
      setActiveKey('setting');
    }
  }, [selectedId]);
  return (
    <Tabs
      defaultActiveKey="prop"
      activeKey={activeKey}
      items={tabItems}
      onTabClick={(key: string) => setActiveKey(key)}
    />
  );
};
export default RightPanel;
